<template>
  <div class="cage-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>中空前理片笼A</span>
        <i class="el-icon-right arrow" @click="gotoUrl('ZKFrontCage')"></i>
      </div>
      <div class="svgBox">
        <el-divider>总使用率</el-divider>
        <dv-percent-pond
          :config="config(totalA[0])"
          textColor="red"
          style="width: 100%; height: 200px"
        />
        <div class="gridView">
          <el-divider>每笼使用率</el-divider>
          <div v-for="item in 6" :key="item" style="width: 23%; height: 150px">
            <dv-percent-pond
              :config="config(rateA[0][item - 1])"
              style="width: 100%; height: 75%"
            />
            <div class="Text">{{ item }}号笼</div>
          </div>
          <div
            v-for="item in [7, 8]"
            :key="item"
            style="width: 23%; height: 150px"
          >
            <dv-percent-pond
              :config="config(rateA[0][item - 1])"
              style="width: 100%; height: 75%"
            />
            <div class="Text">{{ item }}号笼</div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>中空前理片笼B</span>
        <i class="el-icon-right arrow" @click="gotoUrl('ZKBehindCage')"></i>
      </div>
      <div class="svgBox">
        <el-divider>总使用率</el-divider>
        <dv-percent-pond
          :config="config(totalA[1])"
          textColor="red"
          style="width: 100%; height: 200px"
        />
        <div class="gridView">
          <el-divider>每笼使用率</el-divider>
          <div v-for="item in 6" :key="item" style="width: 23%; height: 150px">
            <dv-percent-pond
              :config="config(rateA[1][item - 1])"
              style="width: 100%; height: 75%"
            />
            <div class="Text">{{ item }}号笼</div>
          </div>
          <div
            v-for="item in [7, 8]"
            :key="item"
            style="width: 23%; height: 150px"
          >
            <dv-percent-pond
              :config="config(rateA[1][item - 1])"
              style="width: 100%; height: 75%"
            />
            <div class="Text">{{ item }}号笼</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { listGlass2 } from "@/api/assembly/glass";
export default {
  data() {
    return {
      rate: 46,
      cageGlassA: [],
      cageGlassB: [],
    };
  },
  methods: {
    config(rate) {
      return {
        value: rate,
        textColor: "#1a1aa6",
        colors: this.prenctColor,
      };
    },
    gotoUrl(e) {
      this.$router.push({
        name: "GlassCage",
        query: {
          place: e,
        },
      });
    },
    getGlassData(param, name) {
      listGlass2({ place: param }).then((res) => {
        this[name] = res.rows;
      });
    },
  },
  computed: {
    prenctColor() {
      if (this.rate <= 60) return ["#38e4cd"];
      if (this.rate > 60 && this.rate < 80) return ["#38e4cd", "#fcc525"];
      if (this.rate >= 80) return ["#38e4cd", "#fcc525", "red"];
    },
    cageA() {
      let glassMap = [
        {
          1: [],
          2: [],
          3: [],
          4: [],
          5: [],
          6: [],
          7: [],
          8: [],
        },
        {
          1: [],
          2: [],
          3: [],
          4: [],
          5: [],
          6: [],
          7: [],
          8: [],
        },
      ];
      this.cageGlassA.forEach((item) => {
        let grig = item.grid < 300 ? 50  : 23
        let gridValue = grig == 23 ? Math.ceil((item.grid-300) / grig) + 6 : Math.ceil((item.grid) / grig);
        glassMap[0][gridValue].push(item);
      });
      this.cageGlassB.forEach((item) => {
        let grig = item.grid < 300 ? 50  : 23
        let gridValue = grig == 23 ? Math.ceil((item.grid-300) / grig) + 6 : Math.ceil((item.grid) / grig);
        glassMap[1][gridValue].push(item);
      });
      return glassMap;
    },
    glassData() {
      let parenData = [];
      this.cageA.forEach((data, cageIndex) => {
        let childData = {};
        for (let i in data) {
          let ar = {};
          data[i].forEach((item, index) => {
            let grid = item.grid < 300 ? (i - 1) * 50 : (i - 7) *23 + 300
            let gridValue = item.grid - grid;
            if (!ar.hasOwnProperty(gridValue)) {
              ar[gridValue] = [];
            }
            ar[gridValue].push(item);
          });
          for (let key in ar) {
            ar[key].sort((a, b) => {
              return a.gridGroup - b.gridGroup;
            });
          }
          childData[i] = ar;
        }
        parenData[cageIndex] = childData;
      });

      return parenData;
    },
    rateA() {
      let parentArr = [];
      this.glassData.forEach((item, index) => {
        let arr = [];
        for (let key in item) {
          let grid = [7, 8].includes(key * 1) ? 23 : 50;
          arr[key - 1] =
            Math.floor(
              (Object.keys(item[key]).length / grid).toFixed(2) * 100
            ) || 0;
        }
        parentArr[index] = arr;
      });

      return parentArr;
    },
    totalA() {
      let arr = [];
      this.rateA.forEach((item, cageIndex) => {
        arr[cageIndex] = (
          item.reduce((pre, cur) => {
            return (pre += cur);
          }, 0) / 8
        ).toFixed(2);
      });
      return arr;
    },
  },
  mounted() {
    this.getGlassData("ZKFrontCage", "cageGlassA");
    this.getGlassData("ZKBehindCage", "cageGlassB");
  },
};
</script>

<style lang="less" scoped>
.cage-container {
  height: calc(100vh - 50px);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  .clearfix {
    height: 40px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    .arrow {
      font-size: 28px;
      color: #409eff;
      font-weight: bold;
      margin-left: auto;
      cursor: pointer;
    }
    .arrow:hover {
      text-decoration: underline;
    }
  }
  .gridView {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0 0 0;
    .Text {
      height: 25%;
      display: flex;
      font-size: 18px;
      font-weight: bold;
      align-items: center;
      justify-content: center;
      letter-spacing: 10px;
    }
  }
  .box-card {
    width: 800px;
    margin-right: 20px;
  }
}
</style>
